<template>
    <!--5.底部菜单栏-->
    <div class="div-height">
        <div class="menu" >
            <div class="col-xs-4 menu-item" :class="{'menu-item-activied':index=='1'}" @click="handleClick('1')">
                <span class="glyphicon glyphicon-home"></span>
                <p>首页</p>
            </div>
            <div class="col-xs-4 menu-item"  @click="handleClick('2')">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                <p>选号</p>
            </div>
            <div class="col-xs-4 menu-item" :class="{'menu-item-activied':index=='3'}"  @click="handleClick('3')">
                <span class="glyphicon glyphicon-user"></span>
                <p>我</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Vue,Prop} from "vue-property-decorator"
    export default class MenuBar1 extends Vue{
        //需要使用index  注册index
        // @Prop({type:String,default:"1"})index!: string;

        index!: string;

        handleClick(index: string): void{
            console.log(index)
            switch (index){
                case '1':
                    //跳转去首页
                    console.log("click 1")
                    // this.$router.push('/')
                    break;
                case '2':
                    console.log("click 2")
                    // this.$router.push('/select')
                    //跳转去选号页面
                    break;
                case '3':
                    console.log("click 3")
                    // this.$router.push('/user')
                    //跳转去用户页面
                    break;
            }
        }
    }
</script>

<style scoped>
    .div-height{
        height: 100px;
    }
</style>